import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { channelsActive, channelsGet } from '../../store/actions/channels'

export default function Channel() {
  const dispatch = useDispatch()
  const channels = useSelector((state) => state.channels.lists)
  const active = useSelector((state) => state.channels.active)
  const handleClick = (id) => dispatch(channelsActive(id))
  useEffect(() => {
    dispatch(channelsGet())
  }, [dispatch])
  // 1. Redux 中准备一个变量
  // 2. 用这个变量和 item.id 进行比较，如果一样，就使用 select class
  // 3. 点击 li 的时候，设置 Redux 中的变量为点击的那一项的 id
  return (
    <ul className='catagtory'>
      {channels.map((item) => (
        <li
          key={item.id}
          className={item.id === active ? 'select' : ''}
          onClick={() => handleClick(item.id)}
        >
          {item.name}
        </li>
      ))}
    </ul>
  )
}
